<template>
	<view class="bgColor">
		<watermark></watermark>
		<view class="wxgroup-list">
			<view class="wxgroup-list-item" v-for="(v, i) in list" @click="gofriend(v)" :key="i">
				<image class="wxgroup-list-img" :src="v.avatar" mode="aspectFill"></image>
				<text class="wxgroup-list-text">{{ v.name }}</text>
			</view>
		</view>
	</view>
</template>
<script>
import detailVue from '../personInfo/detail.vue';
export default {
	data() {
		return {
			queryParams: {
				refreshing: false,
				status: 'more',
				pageNum: 1,
				pageSize: 50
			},
			list:[],
			groupId: '',
			is_add_firend: '',
			user_type: ''
		};
	},
	onLoad(e) {
		this.groupId = e.groupId;
		this.is_add_firend = e.is_add_firend;
		this.user_type = e.user_type;
	},
	mounted() {
		this.queryParams.refreshing = true;
		this.getList('');
	},
	onReachBottom() {
		this.getList('');
	},
	methods: {
		getList(e){
			uni.showLoading();
			this.queryParams.status = 'loading'
			this.$fc.loadMore({
				url: '/group/get_group_ulist?groupId='+this.groupId,
				queryParams: this.queryParams
			}).then(res => {
				this.queryParams = res.queryParams;
				if (res.status == '3') {
					this.list = [];
					return
				}
				if (res.status == '0') {
					return
				}
				var rows = res.list;
				var list = [];
				for (var i = 0; i < rows.length; i++) {
					var item = rows[i];
					list.push({
						name: item.name,
						avatar: item.avatar,
						userId: item.userId
					});
				}
				if (res.status == '2') {
					this.list = list;
				}
				if (res.status == '1') {
					this.list = this.list.concat(list);
				}
			});
		},
		gofriend(e) {
			if(this.is_add_firend == 1 || this.user_type == 'root' || this.user_type == 'manage'){
				var show_add = 'on';
			}else{
				var show_add = 'off';
			}
			uni.navigateTo({
				url: this.$fc.get_package_name()+'personInfo/detail?param=' + e.userId+'&source=7&show_add='+show_add
			});
		},
	}
};
</script>
<style>
	page{
		background: #ffffff;
	}
</style>
<style scoped>
/* #ifdef APP-PLUS */
.bgColor {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	z-index: -1;
	overflow: auto;
}
/* #endif */
/* #ifdef H5 */
page {
	background: #ededed;
}
/* #endif */

.xw-tool-list {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	margin-bottom: 18rpx;
}

.xw-tool-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 26rpx 24rpx;
	border-bottom: 1px #eee solid;
}
.xw-tool-list-content:nth-last-child(1) .xw-tool-item {
	border: none;
}

.xw-tool-text {
	margin-right: auto;
}

.xw-tool-btn-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 34rpx 44rpx;
	border-bottom: 1px #eee solid;
	font-weight: bold;
	color: #5f698c;
}
.wxgroup-list {
	background-color: #fff;
	padding: 24rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 24rpx;
}
.wxgroup-list-item {
	width: 20%;
	overflow: hidden;
	box-sizing: border-box;
	margin-top: 12rpx;
	margin-bottom: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wxgroup-list-icon .wxfont {
	color: #999;
	font-size: 46rpx;
}
.wxgroup-list-img {
	width: 105rpx;
	height: 105rpx;
	border-radius: 12rpx;
}
.wxgroup-list-icon {
	display: flex;
	flex-direction: column;
	width: 105rpx;
	height: 105rpx;
	border-radius: 12rpx;
	align-items: center;
	justify-content: center;
	border: 1px #ddd dashed;
}
.wxgroup-list-text {
	text-align: center;
	width: 105rpx;
	font-size: 24rpx;
	color: #999;
	margin-top: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.xw-tool-else .text {
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 520rpx;
}
</style>
